1
<template>
	<div class="index">
		<div style="display: flex">
			<el-radio-group v-model="tabPosition" size="large" style="margin-bottom: 30px" @change="changeTab">
				<el-radio-button type="danger" v-for="item in tabData" :key="item.value" :value="item.value">{{ item.label }}</el-radio-button>
			</el-radio-group>

			<el-button type="success" style="margin-left: 20px" @click="openGG">生成开奖公告</el-button>
		</div>

		<div class="content" v-loading="loading">
			<div class="header">
				<img src="/@/assets/lottery/logo_fuli.png" alt="" class="logo" />
				<div style="width: 200px">
					<el-select v-model="form.drawNumber" placeholder="请选择期号" @change="changeDraw">
						<el-option v-for="item in drawNumberList" :key="item" :label="item" :value="item"></el-option>
					</el-select>
				</div>
			</div>

			<div class="table_info">
				<div class="info_title">
					<div class="title_left">
						<div>{{ tabData.filter((item) => item.value == tabPosition)[0]?.label }}</div>
						<div style="display: flex; align-items: center; gap: 2px">
							第
							<div style="color: red; font-weight: bold">{{ form.drawNumber }}</div>
							期
						</div>
					</div>

					<div class="title_right">
						<div>
							<text>开奖日期：</text>
							<text>{{ selectedDataItem?.drawTime }}</text>
						</div>

						<div>
							<text>兑奖截止日期：</text>
							<text>{{ selectedDataItem?.endCashTime }}</text>
						</div>
					</div>
				</div>

				<div class="last_info">
					<div class="r_ball_list">
						<text class="ball_title">开奖号码：</text>
						<div class="ball_list">
							<text
								class="ball_red"
								v-for="(item, index) in tabPosition == '10002' ? selectedDataItem?.redNum?.split(',') : selectedDataItem?.redNumSort?.split(',')"
								:key="index"
								>{{ item }}</text
							>
							<text class="ball_blue" v-for="(item, index) in selectedDataItem?.buleNum?.split(',')" :key="index">{{ item }}</text>
						</div>
					</div>
				</div>

				<div class="sales">
					<text class="tips_title">本期全国累计销售金额：</text>
					<text class="sales_money">{{ selectedDataItem?.totalSales }}元</text>

					<text class="tips_title" style="margin-left: 10px">奖池滚存：</text>
					<text class="sales_money">{{ selectedDataItem?.balanceMoney }}元</text>

					<text style="margin-left: 10px">提示：本站开奖数据仅供参考，中奖查询以彩票中心官方开奖信息为准</text>
				</div>
			</div>

			<div class="info_title table_head" style="margin-top: 10px; font-weight: bold">
				<text>开奖详情</text>
				<text class="head_text" v-if="!isTableEdit" @click="isTableEdit = true">编辑数据</text>
				<text class="head_text" v-if="isTableEdit" @click="isTableEdit = false">暂存数据（刷新后返回）</text>
			</div>
			<div class="table">
				<div class="table_tr">
					<div class="table_td table_title">奖项</div>
					<div class="table_td table_title">全国中奖注数</div>
					<div class="table_td table_title">宁夏中奖注数</div>
					<div class="table_td table_title">单注奖金（元）</div>
				</div>

				<div class="table_tr" v-for="(item, index) in selectedDataItem?.winNoticeDetailsVos" :key="index">
					<div class="table_td">
						<el-input v-if="isTableEdit" v-model="item.gradeName" style="width: 100px"></el-input>
						<text v-else>{{ item.gradeName }}</text>
					</div>
					<div class="table_td">
						<el-input v-if="isTableEdit" v-model="item.totalNumProvinces" style="width: 100px"></el-input>
						<text v-else>{{ item.totalNum }}</text>
					</div>
					<div class="table_td">
						<el-input v-if="isTableEdit" v-model="item.totalNumProvinces" style="width: 100px"></el-input>
						<text v-else>{{ item.totalNumProvinces }}</text>
					</div>
					<div class="table_td">
						<el-input v-if="isTableEdit" v-model="item.bonus" style="width: 100px"></el-input>
						<text v-else>{{ item.bonus }}</text>
					</div>
				</div>
			</div>
		</div>

		<div class="bottom_option">
			<el-button type="primary" @click="downloadPoster">下载为海报图片</el-button>
		</div>

		<Kuaile8Dialog ref="Kuaile8Ref"></Kuaile8Dialog>
		<ShuangseqiuDialog ref="ShuangseqiuRef"></ShuangseqiuDialog>
		<QilecaiDialog ref="QilecaiRef"></QilecaiDialog>
		<ThreeDDialog ref="ThreeDRef"></ThreeDDialog>
		<GongGaoDialog ref="GongGaoRef" :allData="allData"></GongGaoDialog>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { onMounted, reactive, ref, nextTick } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { useRoute, useRouter } from 'vue-router';
import TableComponents from '/@/components/tableComponents/index.vue';
import { getDataList, getDrawResultList } from '/@/api/api';
import { convertToDateFormat } from '/@/utils/Utils';
import Kuaile8Dialog from './dialog/Kuaile8.vue';
import ShuangseqiuDialog from './dialog/Shuangseqiu.vue';
import QilecaiDialog from './dialog/Qilecai.vue';
import ThreeDDialog from './dialog/3D.vue';
import GongGaoDialog from './dialog/GongGao.vue';

const route = useRoute();
const router = useRouter();

const loading = ref(false);
const mockData = ref([]);
const isTableEdit = ref(false);

const form = ref({
	drawNumber: null,
});

const tabData = ref([
	{
		value: '10001',
		label: '双色球',
	},
	{
		value: '10002',
		label: '3D',
	},
	{
		value: '10003',
		label: '七乐彩',
	},
	{
		value: '10005',
		label: '快乐8',
	},
]);

const drawNumberList = ref([]);
const tabPosition = ref('10001');
const tableData = reactive({
	data: [],
	total: 0,
	page: 1,
	size: 10,
});
const tableLoading = ref(false);

const dataLastTime = ref({});
const dataList = ref([]);
// 根据期号获取开奖结果
async function getDataListFn() {
	dataList.value = mockData.value;
	loading.value = true;

	let { code, data } = await getDataList({
		gameId: tabData.value.filter((item) => item.value == tabPosition.value)[0].value,
		drawIssueParam: form.value.drawNumber,
	});
	loading.value = false;

	if (code == 200) {
		dataList.value = data.map((item) => {
			let redNumSort = item.redNum
				.split(',')
				.map(String)
				.sort((a, b) => a - b)
				.join(',');
			item.redNumSort = redNumSort;
			let winNoticeDetailsVos = item.winNoticeDetailsVos.map((item) => {
				return {
					...item,
					bonus: Number(item.bonus / 100).toFixed(2),
					// totalNumProvinces: Number(item.totalNumProvinces).toFixed(2),
				};
			});

			return {
				...item, // 复制原有属性
				// 添加/修改需要处理的属性（例如格式化日期）
				drawTime: convertToDateFormat(item.drawTime),
				endCashTime: convertToDateFormat(item.endCashTime),
				// totalSales: Number(item.totalSales / 100).toFixed(0),
				// balanceMoney: Number(item.balanceMoney / 100).toFixed(0),
				// totalSalesProvince: Number(item.totalSalesProvince / 100).toFixed(0),
				// totalWinProvince: Number(item.totalWinProvince / 100).toFixed(0),

				totalSales: formatNumber(item.totalSales),
				balanceMoney: formatNumber(item.balanceMoney),
				totalSalesProvince: formatNumber(item.totalSalesProvince),
				totalWinProvince: formatNumber(item.totalWinProvince),
				winNoticeDetailsVos,
			};
		});
		selectedDataItem.value = dataList.value[0];
		dataLastTime.value = dataList.value[0];
	}
}

function formatNumber(num) {
	// 先除以100
	const result = num / 100;
	// 转换为两位小数的字符串
	const fixed = result.toFixed(2);
	// 判断是否以.00结尾，如果是则返回整数部分，否则返回处理后的值
	return fixed.endsWith('.00') ? fixed.split('.')[0] : Number(fixed).toString();
}

const allData = ref({});
async function getAll() {
	loading.value = true;
	for (const item of tabData.value) {
		// 获取所有彩种的最新一期的期号
		let lastDraw = await getSingeDraw(item.value);

		// 获取所有彩种的最新一期的中奖号码
		let singleData = await getSingeData(item.value, lastDraw[0]);
		console.log('🚀 ~ getAll ~ singleData:', singleData);

		allData.value[item.value] = singleData;
	}
	loading.value = false;
	GongGaoRef.value.showModal(selectedDataItem.value);
}

async function getSingeData(gameId, drawIssueParam) {
	let { code, data } = await getDataList({
		gameId,
		drawIssueParam,
	});
	if (code == 200) {
		let redNumSort = data[0].redNum
			.split(',')
			.map(String)
			.sort((a, b) => a - b)
			.join(',');
		data[0].redNumSort = redNumSort;
		return data;
	}
}

async function getSingeDraw(gameId) {
	let { code, data } = await getDrawResultList({
		gameId,
	});
	if (code == 200) {
		return data;
	}
}

// 获取期号列表
async function getDrawResultListFn() {
	let { code, data } = await getDrawResultList({
		gameId: tabData.value.filter((item) => item.value == tabPosition.value)[0]?.value,
	});
	if (code == 200) {
		drawNumberList.value = data;
	}
}

const selectedDataItem = ref({});

async function changeTab(value: string) {
	tabPosition.value = value;
	await getDrawResultListFn();
	form.value.drawNumber = drawNumberList.value[0];
	await getDataListFn();
}

async function changeDraw(item) {
	form.value.drawNumber = item;
	await getDataListFn();
}

const ShuangseqiuRef = ref(null);
const Kuaile8Ref = ref(null);
const QilecaiRef = ref(null);
const ThreeDRef = ref(null);

function downloadPoster() {
	switch (tabPosition.value) {
		case '10001':
			ShuangseqiuRef.value.showModal(selectedDataItem.value);
			return;
		case '10003':
			QilecaiRef.value.showModal(selectedDataItem.value);
			break;
		case '10002':
			ThreeDRef.value.showModal(selectedDataItem.value);
			break;
		case '10005':
			Kuaile8Ref.value.showModal(selectedDataItem.value);
			break;
	}
}

const GongGaoRef = ref();
async function openGG() {
	getAll();
}

// 页面加载时
onMounted(async () => {
	NextLoading.done();

	await getDrawResultListFn();
	form.value.drawNumber = drawNumberList.value[0];
	await getDataListFn();
});
</script>

<style scoped lang="scss">
$lineColor: #ccc;

.index {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	overflow-y: auto;
	padding-bottom: 200px;
}

.content {
	width: 100%;
	max-width: 1000px;
	padding: 30px;

	.logo {
		width: 160px;
		height: 40px;
	}
}

.info_title {
	background-color: #f2f3f5;
	display: flex;
	justify-content: space-between;
	padding: 10px;
	border: 1px solid $lineColor;
}

.table_info {
	margin-top: 20px;

	.title_left {
		display: flex;
		font-size: 14px;
		gap: 5px;
		align-items: center;
	}

	.title_right {
		font-size: 14px;
		color: #999;
		gap: 10px;
		display: flex;
		align-items: center;
	}

	.last_info {
		width: 100%;
		border: 1px solid $lineColor;
		border-top: 0;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 30px 40px;
	}

	.r_ball_list {
		display: flex;
		align-items: center;

		width: 100%;
		height: 60px;
	}

	.ball_title {
		border: 1px solid $lineColor;
		width: 100px;
		height: 100%;
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		border-right: 0;
	}

	.ball_list {
		display: flex;
		flex: 1;
		height: 100%;
		border: 1px solid $lineColor;
		display: flex;
		align-items: center;
		padding-left: 20px;
		gap: 10px;

		.ball_red {
			color: white;
			background-color: red;
			border-radius: 100px;
			width: 25px;
			height: 25px;
			display: flex;
			text-align: center;
			justify-content: center;
			align-items: center;

			background: linear-gradient(to bottom, #fe6962, #e6524b);
		}

		.ball_blue {
			color: white;
			background: linear-gradient(to bottom, #5f9dfc, #376bba);
			border-radius: 100px;
			width: 25px;
			height: 25px;
			display: flex;
			text-align: center;
			justify-content: center;
			align-items: center;
		}
	}

	.sales {
		display: flex;
		border: 1px solid $lineColor;
		padding: 20px;
		border-top: 0;
	}

	.tips_title {
		font-size: 14px;
	}

	.sales_money {
		font-size: 14px;
		color: red;
		font-weight: bold;
	}
}

.header {
	display: flex;
	justify-content: space-between;
}

.table {
	.table_tr {
		display: flex;
	}

	.table_td {
		flex: 1;
		border: 1px solid $lineColor;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 0;
	}

	.table_title {
		color: #999;
	}
}

.bottom_option {
	width: 100vw;
	height: 80px;
	background-color: white;
	box-shadow: 0 0px 5px rgba(79, 79, 79, 0.1);
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
}

.table_head {
	display: flex;
	justify-content: space-between;

	.head_text {
		font-size: 13px;
		font-weight: 400;
		color: #376bba;
		cursor: pointer;
	}
}
</style>
